練習目標

• 頁面排版
• 錨點
• Top 按鈕

CodePen

重點屬性

padding & margin

這是我們最常看到的排版元素

padding 內距 : 控制區域內元素離 區域的距離
margin 外距 : 控制區域外邊界距離 ，其他區域跟該區域的距離
善用兩個屬性就可以排出一個無形的空間提高頁面美感

background

很多頁面的圖片會隨著螢幕縮放，不過大多數都是用div 在只用background 屬性 將圖片設為背景， 如此圖片就能隨著div 的大小而伸縮，當然仍需做一些調整:

linear-gradient() : 漸層 ，這邊我用來做陰影效果，把圖片轉暗一點
background-repeat: no repeat 因為有時候圖片太小，會重複出現圖片補足空白，當然這不好看。
background-position center top 這邊我讓圖片調整為往上置中對齊，這樣能讓圖片比較完整的呈現

功能

錨點

大家都知道 就是用 href='#id' 標籤對上id 就能做，但是會有一個狀況，就是他是瞬間跳過去，這邊有一個共用的程式碼讓圖片用滑動的方式跳轉，複製貼上 大功告成

Smooth scrolling when clicking an anchor link

// 毛點跳轉動畫
$(document).on("click", 'a[href^="#"]', function(event) {
  event.preventDefault();

  $("html, body").animate(
    {
      scrollTop: $($.attr(this, "href")).offset().top
    },
    500
  );
});

底部TOP 按鈕

這也算是 前端必修課題ScrollTopˇ的觀念

我這邊是參考W3C-scroll_to_top

我調整成當他滑動距離為螢幕裝置的高度後，會出現Top按鈕

window.onscroll = function() {
  scrollFunction();
};

function scrollFunction() {
  if (
    document.body.scrollTop > document.body.clientHeight ||
    document.documentElement.scrollTop > document.documentElement.clientHeight
  ) {
    document.getElementById("float").style.display = "block";
  } else {
    document.getElementById("float").style.display = "none";
  }
}